<template>
    <el-dialog
        :title="chapterId ? '修改课时' : '添加课时'"
        class="dialogForm"
        :visible="visible"
        :before-close="handleClose"
        width="50%"
    >
        <!-- <div class="stepBox row">
            <div class="stepItem active">
                <span class="circle">1</span>
                <span>添加教学任务</span>
            </div>
            <div class="stepItem" :class="{ active: step >= 2 }">
                <span class="circle">2</span>
                <span>设置内容</span>
            </div>
            <div class="stepItem" :class="{ active: step >= 3 }">
                <span class="circle">3</span>
                <span>设置完成条件</span>
            </div>
        </div> -->
        <div v-if="step == 1" class="stepTypeBox">
            <div class="stepType col ali_cen ju_cen" @click="setStep(1)">
                <i class="el-icon-video-play"></i>
                <div class="txt">视频</div>
            </div>
        </div>
        <div class="row ju_cen" v-if="step == 2">
            <el-form
                ref="lessonForm"
                :model="form"
                :rules="rule"
                label-width="80px"
                style="width:80%"
            >
                <el-form-item label="标题名称" prop="title" v-if="!multiple">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="是否免费">
                    <el-switch
                        v-model="form.isFree"
                        active-value="T"
                        inactive-value="F"
                    ></el-switch>
                </el-form-item>

                <el-form-item label="视频" prop="mediaUri">
                    <i
                        class="el-icon-error delVideo"
                        @click.stop="delVideo"
                        v-if="form.mediaUri != '' && !videoFlag && !multiple"
                    ></i>
                    <el-upload
                        class="avatar-uploader"
                        drag
                        ref="upload"
                        :multiple="multiple"
                        action="https://upload.qiniup.com"
                        v-bind:data="qiniuData"
                        v-bind:on-progress="uploadVideoProcess"
                        v-bind:on-success="handleVideoSuccess"
                        :before-upload="beforeUploadVideo"
                        :before-remove="beforeRemove"
                        :show-file-list="multiple"
                    >
                        <template v-if="!multiple">
                            <video
                                v-if="
                                    form.mediaUri != '' &&
                                        !videoFlag &&
                                        !multiple
                                "
                                v-bind:src="form.mediaUri"
                                class="avatar video-avatar"
                                controls="controls"
                            >
                                您的浏览器不支持视频播放
                            </video>
                            <template
                                v-else-if="form.mediaUri == '' && !videoFlag"
                            >
                                <!-- <template v-else> -->
                                <i class="el-icon-plus "></i>
                                <div class="el-upload__text">
                                    将视频拖到此处，或<em>点击上传</em>
                                </div>
                            </template>
                        </template>
                        <template v-else
                            ><i class="el-icon-plus "></i>
                            <div class="el-upload__text">
                                将视频拖到此处，或<em>点击上传</em>
                            </div>
                        </template>

                        <el-progress
                            v-if="videoFlag == true && !multiple"
                            type="circle"
                            v-bind:percentage="videoUploadPercent"
                            style="margin-top:7px;"
                        ></el-progress>
                    </el-upload>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <!-- <el-button v-if="step != 1" @click="setStep(-1)">上一步</el-button>
            <el-button @click="setStep(1)" v-if="step != 3">下一步</el-button>
            <el-button type="success" v-if="step == 3">提交</el-button> -->
            <el-button type="info" plain @click="handleClose">取消</el-button>
            <el-button type="success" @click="submit">提交</el-button>
        </span>
    </el-dialog>
</template>
<script>
import { getQiniuToken } from "@/api/user.js";
import {
    postLesson,
    putLesson,
    postLessonBatch,
    getLesson
} from "@/api/edu/service";
export default {
    name: "Config",
    data() {
        return {
            step: 2,
            form: {
                title: "",
                mediaType: "video",
                mediaUri: "",
                remark: "",
                isFree: "T",
                mediaName: ""
            },
            rule: {
                title: [
                    { required: true, trigger: "blur", message: "请填写标题" }
                ],
                mediaUri: [
                    { required: true, trigger: "blur", message: "请选择视频" }
                ]
            },
            videoFlag: false,
            //是否显示进度条
            videoUploadPercent: "",
            //进度条的进度，
            isShowUploadVideo: false,
            qiniuData: {},
            jsonData: {},
            ary: []
        };
    },
    props: ["visible", "courseId", "multiple", "chapterId"],
    created() {},
    watch: {
        async visible() {
            if (this.$refs.upload) {
                this.$refs.upload.clearFiles();
            }
            if (this.visible && this.chapterId) {
                this.getLesson();
            }
        },
        "form.isFree": {
            handler() {
                if (this.multiple) {
                    this.ary.forEach(item => {
                        item.isFree = this.form.isFree;
                    });
                } else {
                    this.form.isFree = this.form.isFree;
                }
            },
            deep: true
        }
    },
    methods: {
        delVideo() {
            this.form.mediaUri = "";
        },
        getLesson() {
            getLesson(this.courseId, this.chapterId).then(res => {
                this.form = res.data;
            });
        },
        setStep(i) {
            this.step += i;
        },
        handleClose(done) {
            this.resetForm();
            this.$emit("update:chapterId", "");
            this.$emit("update:visible", false);
        },
        // 删除回调
        beforeRemove(file, fileList) {
            let index = 0;
            fileList.forEach((item, i) => {
                if (item.name == file.name) {
                    index = i;
                }
            });
            this.ary.splice(index, 1);
        },
        //上传前回调
        async beforeUploadVideo(file) {
            let data = await getQiniuToken();
            this.qiniuData = data.data;
            this.qiniuData.token = this.qiniuData.upToken;
            this.qiniuData.key =
                new Date().valueOf() + "." + file.name.split(".")[1];
            return new Promise((resolve, reject) => {
                if (
                    [
                        "video/mp4",
                        "video/ogg",
                        "video/flv",
                        "video/avi",
                        "video/wmv",
                        "video/rmvb",
                        "video/mov"
                    ].indexOf(file.type) == -1
                ) {
                    this.$message.error("请上传正确的视频格式");
                    this.videoFlag = false;
                    return reject(false);
                } else {
                    return resolve(true);
                }
            });

            // this.isShowUploadVideo = false;
        },
        //进度条
        uploadVideoProcess(event, file, fileList) {
            this.videoFlag = true;
            this.videoUploadPercent = file.percentage.toFixed(0) * 1;
        },
        submit() {
            // 批量导入
            if (this.multiple) {
                postLessonBatch(this.courseId, this.ary).then(res => {
                    if (res.code == 200) {
                        this.handleClose();
                        this.resetForm();
                        this.$emit("getLesson", res.data);
                    } else {
                        this.$message.error(res.msg);
                    }
                });
                return false;
            }
            if (this.form.chapterId) {
                putLesson(this.courseId, this.form).then(res => {
                    res.data.editType = true;
                    res.data.type = "lesson";
                    res.data.chapterId = this.form.chapterId;
                    console.log(res.data);
                    this.handleClose();
                    this.resetForm();
                    this.$emit("getLesson", res.data);
                });
                return false;
            }
            this.$refs["lessonForm"].validate(valid => {
                if (valid) {
                    postLesson(this.courseId, this.form).then(res => {
                        if (res.code == 200) {
                            this.handleClose();
                            this.resetForm();
                            this.$emit("getLesson", res.data);
                        } else {
                            this.$message.error(res.msg);
                        }
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 重置表单
        resetForm() {
            this.form = {
                title: "",
                mediaType: "video",
                mediaUri: "",
                remark: "",
                isFree: "T",
                mediaName: ""
            };
        },
        //上传成功回调
        handleVideoSuccess(res, file) {
            this.isShowUploadVideo = true;
            this.videoFlag = false;
            this.videoUploadPercent = 0;

            // http://qiniu.gaodeer.com/
            if (res.hash) {
                if (this.multiple) {
                    // 多选
                    this.ary.push({
                        mediaUri: "http://qiniu.gaodeer.com/" + res.key,
                        mediaName: file.name.split(".")[0],
                        title: file.name.split(".")[0],
                        mediaType: "video",
                        remark: "",
                        isFree: this.form.isFree
                    });
                    return false;
                }
                this.form.mediaUri = "http://qiniu.gaodeer.com/" + res.key;
                this.form.mediaName = file.name.split(".")[0];
            } else {
                this.$message.error(res);
            }
        }
    }
};
</script>
<style lang="scss">
.delVideo {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #ddd;
    font-size: 24px;
    cursor: pointer;
    z-index: 999;
}
.avatar-uploader .el-upload {
    width: 100%;
    position: relative;
}
.el-upload-dragger {
    // width: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.stepItem {
    flex: 1;
    border-bottom: 2px solid #e1e1e1;
    padding-bottom: 20px;
    text-align: center;
    color: #e1e1e1;
    .circle {
        color: white;
        width: 20px;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 14px;
        background: #e1e1e1;
        border-radius: 50%;
        margin-right: 10px;
    }
}
.active {
    border-bottom: 2px solid #43bc60;
    color: #616161;
    .circle {
        background: #43bc60;
    }
}
.stepTypeBox {
    margin-top: 20px;
    padding: 0 30px;
}
.stepType {
    width: 180px;
    height: 110px;
    background: #f4f6f8;
    border-radius: 4px;
    cursor: pointer;
    i {
        font-size: 35px;
    }
    .txt {
        font-size: 14px;
        margin-top: 10px;
        color: #919191;
    }
}
.stepType:hover {
    background: #43bc60;
    i {
        color: white;
    }
    .txt {
        color: white;
    }
}
.dialogForm {
    display: block;
    .el-dialog {
        margin-top: 15vh !important;
    }
}
</style>
